<template>
  <div class="agency-balance-page">
    <div class="search-wrapper">
      <super-search :search-form="searchForm" :search-item-config="searchItemList" @search="searchHandle"></super-search>
    </div>
    <div class="content-wrapper">
      <super-table :height="tableHeight" :async="asyncTable" ref="tableRef" :loading="loading" :data="tableData" :column="tableColumn" :hasPagination="false">
        <template #tool>
          <a-button type="primary" @click="exportDataHandle" v-debounce>导出</a-button>
        </template>
        <template #action="{ row }">
          <a-button type="link" @click="getInfoHandle(row)">详情</a-button>
        </template>
      </super-table>
    </div>
    <!-- 抽屉 -->
    <a-drawer class="custom-drawer" v-model:visible="drawerOpts.visible" :title="drawerOpts.title" :maskClosable="false" :closable="true" :width="drawerOpts.width" placement="right">
      <component v-model:visible="drawerOpts.visible" :is="drawerOpts.component" :type="drawerOpts.type" :pass-data="drawerOpts.passData" @submit="drawerSubmitHandle"></component>
    </a-drawer>
  </div>
</template>
<script lang="ts">
import Details from "./components/details/index.vue";
export default {
  name: "AgencyBalance",
  components: {
    Details
  }
};
</script>
<script lang="ts" setup>
import TableHeightHook from "@/hook/tableHeightHook";
import { searchItemList } from "./data";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import ModalHook from "@/hook/modalHook";
const { tableHeight, loading } = TableHeightHook(0);
const { searchForm, tableColumn, tableData, drawerOpts, asyncTable, tableRef } = InitHook();
const { searchHandle, getInfoHandle, exportDataHandle } = OperationHook({ drawerOpts, searchForm, tableColumn, tableData, loading, asyncTable, tableRef });
searchHandle();
const { drawerSubmitHandle } = ModalHook({
  drawerOpts
});
</script>
<style lang="stylus" scoped></style>
